<!DOCTYPE html>
<html>
<head><meta name="generator" content="Hexo 3.9.0">
  <meta charset="utf-8">
  
  <title>一张图搞懂js原型链 | 小魏的博客</title>
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  
    <meta name="keywords" content="Vker,Vker's Blog">
  
  <meta name="description" content="语言： js js version: v10.15.1 时间： 2019.4.25 15:34  这里我不说太长的话，去解释，不然会晕。js 里面的原型是真的有一点的绕。记住这几句话就行了，我就不画图了，不然我感觉看图更晕。  万物皆对象。 js 对象分为 函数对象 和 普通对象。 只有函数对象有 prototype ，所有的对象都有 proto 内置属性。 prototype 其实是函数对象的一">
<meta name="keywords" content="原型链,js">
<meta property="og:type" content="article">
<meta property="og:title" content="一张图搞懂js原型链">
<meta property="og:url" content="https://leng521.top/posts/5e8fa495/index.html">
<meta property="og:site_name" content="小魏的博客">
<meta property="og:description" content="语言： js js version: v10.15.1 时间： 2019.4.25 15:34  这里我不说太长的话，去解释，不然会晕。js 里面的原型是真的有一点的绕。记住这几句话就行了，我就不画图了，不然我感觉看图更晕。  万物皆对象。 js 对象分为 函数对象 和 普通对象。 只有函数对象有 prototype ，所有的对象都有 proto 内置属性。 prototype 其实是函数对象的一">
<meta property="og:locale" content="default">
<meta property="og:image" content="https://s2.ax1x.com/2019/04/27/EuyFHI.jpg">
<meta property="og:updated_time" content="2019-08-14T03:22:53.966Z">
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="一张图搞懂js原型链">
<meta name="twitter:description" content="语言： js js version: v10.15.1 时间： 2019.4.25 15:34  这里我不说太长的话，去解释，不然会晕。js 里面的原型是真的有一点的绕。记住这几句话就行了，我就不画图了，不然我感觉看图更晕。  万物皆对象。 js 对象分为 函数对象 和 普通对象。 只有函数对象有 prototype ，所有的对象都有 proto 内置属性。 prototype 其实是函数对象的一">
<meta name="twitter:image" content="https://s2.ax1x.com/2019/04/27/EuyFHI.jpg">
  
  
    <link rel="icon" href="/head.jpg">
  
  <link href="//cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" type="text/css">
  <link rel="stylesheet" href="/css/style.css">
  <script src="/js/pace.min.js"></script>
  

  
	<script>
	var _hmt = _hmt || [];
	(function() {
	  var hm = document.createElement("script");
	  hm.src = "//hm.baidu.com/hm.js?2eaff0c5326867354b0d3469d507d209";
	  var s = document.getElementsByTagName("script")[0]; 
	  s.parentNode.insertBefore(hm, s);
	})();
	</script>

  

</head>
</html>
<body>
  <div id="container">
      <header id="header">
    <div id="banner"></div>
    <div id="header-outer">
        <div id="header-menu" class="header-menu-pos animated">
            <div class="header-menu-container">
                <a href="/" class="left">
                    <span class="site-title">Vker&#39;s Blog</span>
                </a>
                <nav id="header-menu-nav" class="right">
                    
                    <a  href="/">
                        <i class="fa fa-home"></i>
                        <span>Home</span>
                    </a>
                    
                    <a  href="/archives">
                        <i class="fa fa-archive"></i>
                        <span>Archives</span>
                    </a>
                    
                    <a  href="/about">
                        <i class="fa fa-user"></i>
                        <span>About</span>
                    </a>
                    
                </nav>
                <a class="mobile-header-menu-button">
                    <i class="fa fa-bars"></i>
                </a>
            </div>
        </div>
        <div id="header-row">
            <div id="logo">
                <a href="/">
                    <img src="/head.jpg" alt="logo">
                </a>
            </div>
            <div class="header-info">
                <div id="header-title">
                    
                    <h2>
                        Vker&#39;s Blog
                    </h2>
                    
                </div>
                <div id="header-description">
                    
                    <h3>
                        一个专注 游戏研发 的技术博客
                    </h3>
                    
                </div>
            </div>
            <nav class="header-nav">
                <div class="social">
                    
                        <a title="Vker" target="_blank" href="//leng521.top">
                            <i class="fa fa-home fa-2x"></i></a>
                    
                        <a title="Github" target="_blank" href="//github.com">
                            <i class="fa fa-github fa-2x"></i></a>
                    
                        <a title="Weibo" target="_blank" href="//weibo.com">
                            <i class="fa fa-weibo fa-2x"></i></a>
                    
                        <a title="Twitter" target="_blank" href="//twitter.com">
                            <i class="fa fa-twitter fa-2x"></i></a>
                    
                </div>
            </nav>
        </div>
    </div>
</header>
      <div class="outer">
        <section id="main" class="body-wrap"><article id="post-一张图搞懂js原型链" class="article article-type-post" itemscope itemprop="blogPost">
  <div class="article-inner">
    
      <header class="article-header">
        
  
    <h1 class="post-title" itemprop="name">
      一张图搞懂js原型链
    </h1>
    <div class="post-title-bar">
      <ul>
          
              <li>
                  <i class="fa fa-book"></i>
                  
                      <a href="/categories/js/">js</a>
                  
              </li>
          
        <li>
          <i class="fa fa-calendar"></i>  2019-04-25
        </li>
        <li>
          <i class="fa fa-eye"></i>
          <span id="busuanzi_value_page_pv"></span>
        </li>
      </ul>
    </div>
  

          
      </header>
    
    <div class="article-entry post-content" itemprop="articleBody">
      
            
            <p>语言： js</p>
<p>js version: v10.15.1</p>
<p>时间： 2019.4.25 15:34</p>
<blockquote>
<p>这里我不说太长的话，去解释，不然会晕。<br>js 里面的原型是真的有一点的绕。记住这几句话就行了，我就不画图了，不然我感觉看图更晕。</p>
<ol>
<li>万物皆对象。</li>
<li>js 对象分为 函数对象 和 普通对象。</li>
<li>只有函数对象有 prototype ，所有的对象都有 <strong>proto</strong> 内置属性。</li>
<li>prototype 其实是函数对象的一个实例。</li>
<li><strong>proto</strong> 是构造函数的原型对象。</li>
<li>Function.prototype 它既是函数对象也是不普通对象。</li>
<li>Object.prototype.<strong>proto</strong> 是个 null。</li>
</ol>
</blockquote>
<a id="more"></a>
<p><img src="https://s2.ax1x.com/2019/04/27/EuyFHI.jpg" alt=""></p>
<h3 id="什么是函数对象？什么是普通对象？"><a href="#什么是函数对象？什么是普通对象？" class="headerlink" title="什么是函数对象？什么是普通对象？"></a>什么是函数对象？什么是普通对象？</h3><p>解释：<br>    通过 new Function 创建出来的对象是函数对象， 函数对象的实例是普通对象。<br>    Object 就是通过 new Function 创建出来的。<br><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">console</span>.log(<span class="keyword">typeof</span> <span class="built_in">Object</span>); <span class="comment">// =&gt; function 这就是函数对象， 因为他们是js 内置创建出来的。</span></span><br><span class="line"><span class="built_in">console</span>.log(<span class="keyword">typeof</span> <span class="built_in">Function</span>); <span class="comment">// =&gt; function</span></span><br></pre></td></tr></table></figure></p>
<h3 id="什么是函数的原型-prototype"><a href="#什么是函数的原型-prototype" class="headerlink" title="什么是函数的原型(prototype)"></a>什么是函数的原型(prototype)</h3><p>原型(prototype)其实是函数对象的实例，前面说过.<br>在代码中的体现如下<br><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">A</span>(<span class="params"></span>)</span>&#123;&#125;</span><br><span class="line">A.prototype.walk = <span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">    <span class="built_in">console</span>.log(<span class="string">"walk"</span>);</span><br><span class="line">&#125;</span><br><span class="line"><span class="built_in">console</span>.log(<span class="keyword">typeof</span> A.prototype); <span class="comment">// object</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// 这个其实和这个差不多。</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">B</span>(<span class="params"></span>) </span>&#123;&#125;</span><br><span class="line">B.prototype = &#123;</span><br><span class="line">    walk:<span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">        <span class="built_in">console</span>.log(<span class="string">"walk"</span>);</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">new</span> A().walk(); <span class="comment">// =&gt; walk</span></span><br><span class="line"><span class="keyword">new</span> B().walk(); <span class="comment">// =&gt; walk</span></span><br></pre></td></tr></table></figure></p>
<p>其实函数对象A 和 函数对象 B 是拥有一样的功能的。<br>你其实就可以想象成他就是一个普通对象而已，确切的说是函数对象的一个实例。</p>
<h3 id="怎么判断这个对象到底是-函数对象还是普通对象？"><a href="#怎么判断这个对象到底是-函数对象还是普通对象？" class="headerlink" title="怎么判断这个对象到底是 函数对象还是普通对象？"></a>怎么判断这个对象到底是 函数对象还是普通对象？</h3><p>一个简单的判断如下：<br><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 这个就是一个函数对象，你可能说这个是一个函数，但是它是 new Function() 创建出来的 所以它是一个函数的一个实例对象</span></span><br><span class="line"><span class="built_in">console</span>.log(<span class="keyword">typeof</span> <span class="built_in">Object</span>); <span class="comment">// =&gt; function</span></span><br><span class="line"><span class="comment">// 这个就是一个普通对象</span></span><br><span class="line"><span class="built_in">console</span>.log(<span class="keyword">typeof</span> <span class="keyword">new</span> <span class="built_in">Object</span>()); <span class="comment">// =&gt; object</span></span><br></pre></td></tr></table></figure></p>
<h3 id="什么是proto"><a href="#什么是proto" class="headerlink" title="什么是proto?"></a>什么是<strong>proto</strong>?</h3><p><strong>proto</strong> 其实是函数对象的原型</p>
<p>举个例子解释这个是什么意思。<br><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 为什么输出的 funciton 因为它就 等同于 Function.prototype</span></span><br><span class="line"><span class="comment">// 因为 Object 这个函数对象就是 根据 Funciton的函数原型构建出来的。</span></span><br><span class="line"><span class="comment">// 所以就有下面的输出了。</span></span><br><span class="line"><span class="built_in">console</span>.log(<span class="built_in">Object</span>.__proto__); <span class="comment">// =&gt; function // 函数对象</span></span><br><span class="line"><span class="comment">// 为了验证上面的说法</span></span><br><span class="line"><span class="built_in">console</span>.log(<span class="built_in">Object</span>.__proto__ === <span class="built_in">Function</span>.prototype); <span class="comment">// true</span></span><br><span class="line"></span><br><span class="line"><span class="built_in">console</span>.log(<span class="built_in">Object</span>.prototype); <span class="comment">// =&gt; &#123;&#125;(object) // 函数对象的一个实例, 只有函数对象有 prototype</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// 验证上面的说法</span></span><br><span class="line"><span class="built_in">console</span>.log(<span class="built_in">Object</span>.prototype === <span class="built_in">Object</span>.__proto__); <span class="comment">// =&gt; false</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// 再来一个 // 可能有人会问下面这个是什么东西</span></span><br><span class="line"><span class="comment">// 按道理 Oject.prototype 应该是 普通对象， 那普通对象的__proto__ 应该是 Obejct.prototype</span></span><br><span class="line"><span class="comment">// 但是不是，可能 这个 js 将这个里强行 置为 null；</span></span><br><span class="line"><span class="comment">// 这个是原型链的 顶端。 记住就好。</span></span><br><span class="line"><span class="comment">// 真的记住就好吗？ 嗯哼，肯定不行。后面解释</span></span><br><span class="line"><span class="built_in">console</span>.log(<span class="built_in">Object</span>.prototype.__proto__); <span class="comment">// =&gt; null</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// 函数对象的原型 应该是 普通对象.__proto__ 应该是 Object.prototype</span></span><br><span class="line"><span class="built_in">console</span>.log(<span class="built_in">Function</span>.prototype.__proto__); <span class="comment">// =&gt; &#123;&#125; 普通对象</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// 强行按照上面 prototype 的概念， 这个应该也是个 Obejct 的 但是 他的输出确实 function</span></span><br><span class="line"><span class="comment">// 这个也是一个特殊的 记住就好， 但它也是 普通对象。</span></span><br><span class="line"><span class="comment">// 那就说明了 Function 自己 创建了自己</span></span><br><span class="line"><span class="built_in">console</span>.log(<span class="built_in">Function</span>.prototype)</span><br><span class="line"></span><br><span class="line"><span class="comment">// 看下面这个例子</span></span><br><span class="line"><span class="comment">// 其实 a 就是 普通对象 </span></span><br><span class="line"><span class="comment">// 我说了 所有对象都有 __proto__ 只有函数对象才有 prototype</span></span><br><span class="line"><span class="keyword">let</span> a = &#123;&#125;; <span class="comment">// let a = new Object();</span></span><br><span class="line"><span class="built_in">console</span>.log(a.prototype); <span class="comment">// null;</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// __proto__ 指的是 构造函数的原型 或者说是函数对象的原型</span></span><br><span class="line"><span class="comment">// &#123;&#125; 和 new Object() 是一样的</span></span><br><span class="line"><span class="comment">// 所以 __proto__ 指向 Object.prototype</span></span><br><span class="line"><span class="comment">// 所以就是 &#123;&#125;</span></span><br><span class="line"><span class="built_in">console</span>.log(a.__proto__); <span class="comment">//  Object.prototype; === &#123;&#125;</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// 验证上面的说法</span></span><br><span class="line"><span class="built_in">console</span>.log(a.__proto__ === <span class="built_in">Object</span>.prototype); <span class="comment">// true</span></span><br></pre></td></tr></table></figure></p>
<p>啊哈，上面的例子有点多呵，要想学习东西就自己多想，多看吧。</p>
<h3 id="那么这些东西到底能干嘛？"><a href="#那么这些东西到底能干嘛？" class="headerlink" title="那么这些东西到底能干嘛？"></a>那么这些东西到底能干嘛？</h3><h3 id="proto-和-prototype-能用来干什么？"><a href="#proto-和-prototype-能用来干什么？" class="headerlink" title="proto 和 prototype 能用来干什么？"></a><strong>proto</strong> 和 prototype 能用来干什么？</h3><p>这里我理解就是为了继承吧。<br>举个例子吧。<br><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> a = &#123;&#125;;</span><br><span class="line"><span class="built_in">console</span>.log(a.__proto__); <span class="comment">// =&gt; function =&gt; Object.prototype =&gt; Function.prototype</span></span><br><span class="line"><span class="string">``</span><span class="string">` </span></span><br><span class="line"><span class="string">a 继承 Object 方法去哪里了 这个 __proto__ 内置属性可能是唯一可以追寻的 属性了。</span></span><br><span class="line"><span class="string"></span></span><br><span class="line"><span class="string">所以我的理解就是 prototype 是个储存方法的容器，是函数对象储存方法的容器。</span></span><br><span class="line"><span class="string">__proto__ 是连接 实例 和 函数对象之间的 桥梁</span></span><br><span class="line"><span class="string"></span></span><br><span class="line"><span class="string">所以继承是靠 __proto__ 属性。</span></span><br><span class="line"><span class="string"></span></span><br><span class="line"><span class="string">### 实现个继承的例子</span></span><br><span class="line"><span class="string">验证一波上面的说法</span></span><br><span class="line"><span class="string">`</span><span class="string">``</span>js</span><br><span class="line"><span class="comment">// 创建一个函数对象</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">A</span> (<span class="params"></span>) </span>&#123;</span><br><span class="line">    <span class="built_in">console</span>.log(<span class="string">'A 对象构造'</span>);</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">// 创建方法</span></span><br><span class="line">A.prototype.walk = <span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">    <span class="built_in">console</span>.log(<span class="string">'A walk'</span>);</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">// 静态方法</span></span><br><span class="line">A.hello = <span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">    <span class="built_in">console</span>.log(<span class="string">'A static method hello method is called'</span>);</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">A.hello();</span><br><span class="line"><span class="keyword">new</span> A().walk();</span><br><span class="line"></span><br><span class="line"><span class="comment">// 创建一个 函数对象 B</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">B</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">    <span class="keyword">this</span>.name = <span class="string">"hello"</span>;</span><br><span class="line">    <span class="built_in">console</span>.log(<span class="string">'B对象构造'</span>)</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">// 这里只是将 A 函数对象的方法承载过来了</span></span><br><span class="line">B.prototype.__proto__ = A.prototype;</span><br><span class="line"><span class="comment">// 继承静态变量</span></span><br><span class="line">B.hello = A.hello;</span><br><span class="line"><span class="comment">// B的构造函数还是B</span></span><br><span class="line"><span class="built_in">console</span>.log(B.prototype.constructor === B); <span class="comment">// true</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">new</span> B().walk(); <span class="comment">// B对象构造  A walk</span></span><br><span class="line">B.hello(); <span class="comment">// A static method hello method is called</span></span><br><span class="line"><span class="built_in">console</span>.log(<span class="keyword">new</span> B().name); <span class="comment">// 说明构造函数里面的 this 是实例的引用</span></span><br></pre></td></tr></table></figure></p>
<h3 id="总结"><a href="#总结" class="headerlink" title="总结"></a>总结</h3><p>不知不觉有些的有点长了，有些复杂的感念只有多打印，多想，才行。<br>描述的少了，就描述的不一定准确。哎～；</p>
<ul>
<li>函数对象 =&gt; 类(class)</li>
<li>普通对象 =&gt; 类(class)的实例</li>
<li>prototype =&gt; 类(class)的实例方法</li>
<li><strong>proto</strong> =&gt; 类(class) 与 类 之间继承的桥梁</li>
<li>B 继承 A 通过 <strong>proto</strong> 将 A的实例方法注入到 B 中</li>
<li>Object ， Function 函数对象</li>
<li>默认 prototype 中会被 js 注入一些默认的方法 constructor </li>
</ul>
<h3 id="解答疑惑"><a href="#解答疑惑" class="headerlink" title="解答疑惑"></a>解答疑惑</h3><blockquote>
<p>Object.prototype.<strong>proto</strong><br>一切皆是对象，上面可以参考继承的例子 这就话就是 Object 继承与谁 那当然是 null；<br>它是一切对象的根本</p>
</blockquote>
<p>哭笑不得这是啥东西<br><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 说明 Function 继承 Object</span></span><br><span class="line"><span class="built_in">console</span>.log(<span class="built_in">Function</span>.prototype.__proto__ === <span class="built_in">Object</span>.prototype) <span class="comment">// =&gt; ture</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// Object 不继承 Function</span></span><br><span class="line"><span class="built_in">console</span>.log(<span class="built_in">Object</span>.prototype.__proto__ === <span class="built_in">Function</span>.prototype) <span class="comment">// =&gt; false</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// Object 是 Function 的 实例对象</span></span><br><span class="line"><span class="built_in">console</span>.log(<span class="built_in">Object</span> <span class="keyword">instanceof</span> <span class="built_in">Function</span>); <span class="comment">// true</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// Function 是 Object 实例对象</span></span><br><span class="line"><span class="built_in">console</span>.log(<span class="built_in">Function</span> <span class="keyword">instanceof</span> <span class="built_in">Object</span>); <span class="comment">// true</span></span><br></pre></td></tr></table></figure></p>
<p>很奇怪， 所有东西继承 Object<br>Object 是通过 Function 创建出来的<br>Function 继承 Object<br>Function 是 Object 的实例</p>
<p>猜测内部实现<br><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> <span class="built_in">Object</span> = <span class="keyword">new</span> <span class="built_in">Function</span>();</span><br><span class="line"></span><br><span class="line"><span class="built_in">Object</span>.prototype.__proto__ = <span class="literal">null</span>;</span><br><span class="line"><span class="comment">// 将 Function 实例对象的 注入到 Object 中</span></span><br><span class="line"><span class="comment">// 这里语法不对 ， 只是为了 模拟</span></span><br><span class="line"><span class="built_in">Object</span>.prototype &lt;= <span class="built_in">Function</span>.prototype;</span><br><span class="line"></span><br><span class="line"><span class="comment">// Function 继承 Object</span></span><br><span class="line"><span class="built_in">Function</span>.prototype.__proto__ = <span class="built_in">Object</span>.prototype;</span><br></pre></td></tr></table></figure></p>
<p>至于 Function.prototype 为什么是 Function 这个可能有点特殊。 我暂时没有没有想到合理的解释，别的感觉，都能完全按这个理论解释清楚。</p>
<p>好了,下个月见.差点这个月没写文章.<br>啊哈.</p>

            <div class="post-copyright">
    <div class="content">
        <p>最后更新： 2019年08月14日 11:22</p>
        <p>原始链接： <a class="post-url" href="/posts/5e8fa495/" title="一张图搞懂js原型链">https://leng521.top/posts/5e8fa495/</a></p>
        <footer>
            <a href="https://leng521.top">
                <img src="/head.jpg" alt="小魏">
                小魏
            </a>
        </footer>
    </div>
</div>

      
        
            

        
    </div>
    <footer class="article-footer">
        
        
<div class="post-share">
    <a href="javascript:;" id="share-sub" class="post-share-fab">
        <i class="fa fa-share-alt"></i>
    </a>
    <div class="post-share-list" id="share-list">
        <ul class="share-icons">
          <li>
            <a class="weibo share-sns" target="_blank" href="http://service.weibo.com/share/share.php?url=https://leng521.top/posts/5e8fa495/&title=《一张图搞懂js原型链》 — 小魏的博客&pic=https://s2.ax1x.com/2019/04/27/EuRqDe.png" data-title="微博">
              <i class="fa fa-weibo"></i>
            </a>
          </li>
          <li>
            <a class="weixin share-sns" id="wxFab" href="javascript:;" data-title="微信">
              <i class="fa fa-weixin"></i>
            </a>
          </li>
          <li>
            <a class="qq share-sns" target="_blank" href="http://connect.qq.com/widget/shareqq/index.html?url=https://leng521.top/posts/5e8fa495/&title=《一张图搞懂js原型链》 — 小魏的博客&source=语言： js
js version: v10.15.1
时间： 2019.4.25 15:34

这里我不说太长的话，去解释，不然会晕。js 里面的原型是..." data-title="QQ">
              <i class="fa fa-qq"></i>
            </a>
          </li>
          <li>
            <a class="facebook share-sns" target="_blank" href="https://www.facebook.com/sharer/sharer.php?u=https://leng521.top/posts/5e8fa495/" data-title="Facebook">
              <i class="fa fa-facebook"></i>
            </a>
          </li>
          <li>
            <a class="twitter share-sns" target="_blank" href="https://twitter.com/intent/tweet?text=《一张图搞懂js原型链》 — 小魏的博客&url=https://leng521.top/posts/5e8fa495/&via=https://leng521.top" data-title="Twitter">
              <i class="fa fa-twitter"></i>
            </a>
          </li>
          <li>
            <a class="google share-sns" target="_blank" href="https://plus.google.com/share?url=https://leng521.top/posts/5e8fa495/" data-title="Google+">
              <i class="fa fa-google-plus"></i>
            </a>
          </li>
        </ul>
     </div>
</div>
<div class="post-modal wx-share" id="wxShare">
    <a class="close" href="javascript:;" id="wxShare-close">×</a>
    <p>扫一扫，分享到微信</p>
    <img src="" alt="微信分享二维码">
</div>

<div class="mask"></div>

        
        <ul class="article-footer-menu">
            
            
  <li class="article-footer-tags">
    <i class="fa fa-tags"></i>
      
    <a href="/tags/原型链/" class="color4">原型链</a>
      
    <a href="/tags/js/" class="color3">js</a>
      
  </li>

        </ul>
        
    </footer>
  </div>
</article>


    <aside class="post-toc-pos post-toc-top" id="post-toc">
        <nav class="post-toc-wrap">
            <ol class="post-toc"><li class="post-toc-item post-toc-level-3"><a class="post-toc-link" href="#什么是函数对象？什么是普通对象？"><span class="post-toc-text">什么是函数对象？什么是普通对象？</span></a></li><li class="post-toc-item post-toc-level-3"><a class="post-toc-link" href="#什么是函数的原型-prototype"><span class="post-toc-text">什么是函数的原型(prototype)</span></a></li><li class="post-toc-item post-toc-level-3"><a class="post-toc-link" href="#怎么判断这个对象到底是-函数对象还是普通对象？"><span class="post-toc-text">怎么判断这个对象到底是 函数对象还是普通对象？</span></a></li><li class="post-toc-item post-toc-level-3"><a class="post-toc-link" href="#什么是proto"><span class="post-toc-text">什么是proto?</span></a></li><li class="post-toc-item post-toc-level-3"><a class="post-toc-link" href="#那么这些东西到底能干嘛？"><span class="post-toc-text">那么这些东西到底能干嘛？</span></a></li><li class="post-toc-item post-toc-level-3"><a class="post-toc-link" href="#proto-和-prototype-能用来干什么？"><span class="post-toc-text">proto 和 prototype 能用来干什么？</span></a></li><li class="post-toc-item post-toc-level-3"><a class="post-toc-link" href="#总结"><span class="post-toc-text">总结</span></a></li><li class="post-toc-item post-toc-level-3"><a class="post-toc-link" href="#解答疑惑"><span class="post-toc-text">解答疑惑</span></a></li></ol>
        </nav>
    </aside>
    

<nav id="article-nav">
  
    <a href="/posts/6512ee5/" id="article-nav-newer" class="article-nav-link-wrap">

      <span class="article-nav-title">
        <i class="fa fa-hand-o-left" aria-hidden="true"></i>
        
          微信小游戏上传媒体文件
        
      </span>
    </a>
  
  
    <a href="/posts/e02f2181/" id="article-nav-older" class="article-nav-link-wrap">
      <span class="article-nav-title">CocosCreator着色器的简单实用</span>
      <i class="fa fa-hand-o-right" aria-hidden="true"></i>
    </a>
  
</nav>



    
        <!-- 来必力City版安装代码 -->
<div id="lv-container" data-id="city" data-uid="MTAyMC8zNDA0MC8xMDU3OA==">
<script type="text/javascript">
   (function(d, s) {
       var j, e = d.getElementsByTagName(s)[0];

       if (typeof LivereTower === 'function') { return; }

       j = d.createElement(s);
       j.src = 'https://cdn-city.livere.com/js/embed.dist.js';
       j.async = true;

       e.parentNode.insertBefore(j, e);
   })(document, 'script');
</script>
<noscript>为正常使用来必力评论功能请激活JavaScript</noscript>
</div>
<!-- City版安装代码已完成 -->
    
</section>
        
      </div>
      <footer id="footer">
  <div class="outer">
    <div id="footer-info" class="inner">
      
<p>
    <span id="busuanzi_container_site_uv" style='display:none'>
        总访客数：<span id="busuanzi_value_site_uv"></span>
    </span>
    <span id="busuanzi_container_site_pv" style='display:none'>
        总访问量：<span id="busuanzi_value_site_pv"></span>
    </span>
</p>


      <p>
        Powered by  <a href="http://hexo.io/" target="_blank">Hexo</a>
        Theme <a href="//github.com/wongminho/hexo-theme-miho" target="_blank">MiHo</a>
      &copy; 2019 小魏<br>
      </p>
    </div>
  </div>
</footer>
    <script async src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>
<script src="//cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script>
  var mihoConfig = {
      root: "https://leng521.top",
      animate: true,
      isHome: false,
      share: true,
      reward: 0
  }
</script>
<div class="sidebar">
    <div id="sidebar-search" title="Search">
        <i class="fa fa-search"></i>
    </div>
    <div id="sidebar-category" title="Categories">
        <i class="fa fa-book"></i>
    </div>
    <div id="sidebar-tag" title="Tags">
        <i class="fa fa-tags"></i>
    </div>
    <div id="sidebar-top">
        <span class="sidebar-top-icon"><i class="fa fa-angle-up"></i></span>
    </div>
</div>
<div class="sidebar-menu-box" id="sidebar-menu-box">
    <div class="sidebar-menu-box-container">
        <div id="sidebar-menu-box-categories">
            <a class="category-link" href="/categories/Cocos-Creator/">Cocos Creator</a><a class="category-link" href="/categories/QQ玩一玩/">QQ玩一玩</a><a class="category-link" href="/categories/cocos2d-x/">cocos2d-x</a><a class="category-link" href="/categories/cocos2dx/">cocos2dx</a><a class="category-link" href="/categories/git/">git</a><a class="category-link" href="/categories/hexo/">hexo</a><a class="category-link" href="/categories/js/">js</a><a class="category-link" href="/categories/linux/">linux</a><a class="category-link" href="/categories/python/">python</a><a class="category-link" href="/categories/前端/">前端</a><a class="category-link" href="/categories/前端/WebGL/">WebGL</a><a class="category-link" href="/categories/前端/bgfx/">bgfx</a><a class="category-link" href="/categories/后端/">后端</a><a class="category-link" href="/categories/后端/golang/">golang</a><a class="category-link" href="/categories/后端/golang/protobuf/">protobuf</a><a class="category-link" href="/categories/后端/nodejs/">nodejs</a><a class="category-link" href="/categories/微信小游戏/">微信小游戏</a><a class="category-link" href="/categories/插件/">插件</a><a class="category-link" href="/categories/自动构建工具/">自动构建工具</a>
        </div>
        <div id="sidebar-menu-box-tags">
            <a href="/tags/9宫格/" style="font-size: 10px;">9宫格</a> <a href="/tags/Cocos-Creator/" style="font-size: 20px;">Cocos Creator</a> <a href="/tags/IT/" style="font-size: 10px;">IT</a> <a href="/tags/QQ玩一玩/" style="font-size: 10px;">QQ玩一玩</a> <a href="/tags/TweenLite/" style="font-size: 10px;">TweenLite</a> <a href="/tags/WebGL/" style="font-size: 10px;">WebGL</a> <a href="/tags/android-studio/" style="font-size: 10px;">android studio</a> <a href="/tags/bgfx/" style="font-size: 12.5px;">bgfx</a> <a href="/tags/c/" style="font-size: 12.5px;">c++</a> <a href="/tags/cocos2d-x/" style="font-size: 15px;">cocos2d-x</a> <a href="/tags/cpp/" style="font-size: 12.5px;">cpp</a> <a href="/tags/gcc/" style="font-size: 10px;">gcc</a> <a href="/tags/git/" style="font-size: 10px;">git</a> <a href="/tags/git-扩展工具/" style="font-size: 10px;">git 扩展工具</a> <a href="/tags/github-page/" style="font-size: 10px;">github page</a> <a href="/tags/git命令/" style="font-size: 10px;">git命令</a> <a href="/tags/golang/" style="font-size: 15px;">golang</a> <a href="/tags/hello-world/" style="font-size: 10px;">hello world</a> <a href="/tags/hexo/" style="font-size: 12.5px;">hexo</a> <a href="/tags/js/" style="font-size: 12.5px;">js</a> <a href="/tags/lua/" style="font-size: 12.5px;">lua</a> <a href="/tags/nodejs/" style="font-size: 10px;">nodejs</a> <a href="/tags/optionParser/" style="font-size: 10px;">optionParser</a> <a href="/tags/protobuf/" style="font-size: 10px;">protobuf</a> <a href="/tags/python/" style="font-size: 17.5px;">python</a> <a href="/tags/scons/" style="font-size: 12.5px;">scons</a> <a href="/tags/spine/" style="font-size: 10px;">spine</a> <a href="/tags/sublime插件/" style="font-size: 10px;">sublime插件</a> <a href="/tags/websocket/" style="font-size: 10px;">websocket</a> <a href="/tags/xmake/" style="font-size: 12.5px;">xmake</a> <a href="/tags/优化/" style="font-size: 12.5px;">优化</a> <a href="/tags/前端/" style="font-size: 15px;">前端</a> <a href="/tags/博客/" style="font-size: 10px;">博客</a> <a href="/tags/原型链/" style="font-size: 10px;">原型链</a> <a href="/tags/后端/" style="font-size: 10px;">后端</a> <a href="/tags/广告/" style="font-size: 10px;">广告</a> <a href="/tags/微信小游戏/" style="font-size: 20px;">微信小游戏</a> <a href="/tags/缺少dll/" style="font-size: 10px;">缺少dll</a> <a href="/tags/闭包/" style="font-size: 10px;">闭包</a>
        </div>
    </div>
    <a href="javascript:;" class="sidebar-menu-box-close">&times;</a>
</div>
<div class="mobile-header-menu-nav" id="mobile-header-menu-nav">
    <div class="mobile-header-menu-container">
        <span class="title">Menus</span>
        <ul class="mobile-header-menu-navbar">
            
            <li>
                <a  href="/">
                    <i class="fa fa-home"></i><span>Home</span>
                </a>
            </li>
            
            <li>
                <a  href="/archives">
                    <i class="fa fa-archive"></i><span>Archives</span>
                </a>
            </li>
            
            <li>
                <a  href="/about">
                    <i class="fa fa-user"></i><span>About</span>
                </a>
            </li>
            
        </ul>
    </div>
    <div class="mobile-header-tag-container">
        <span class="title">Tags</span>
        <div id="mobile-header-container-tags">
            <a href="/tags/9宫格/" style="font-size: 10px;">9宫格</a> <a href="/tags/Cocos-Creator/" style="font-size: 20px;">Cocos Creator</a> <a href="/tags/IT/" style="font-size: 10px;">IT</a> <a href="/tags/QQ玩一玩/" style="font-size: 10px;">QQ玩一玩</a> <a href="/tags/TweenLite/" style="font-size: 10px;">TweenLite</a> <a href="/tags/WebGL/" style="font-size: 10px;">WebGL</a> <a href="/tags/android-studio/" style="font-size: 10px;">android studio</a> <a href="/tags/bgfx/" style="font-size: 12.5px;">bgfx</a> <a href="/tags/c/" style="font-size: 12.5px;">c++</a> <a href="/tags/cocos2d-x/" style="font-size: 15px;">cocos2d-x</a> <a href="/tags/cpp/" style="font-size: 12.5px;">cpp</a> <a href="/tags/gcc/" style="font-size: 10px;">gcc</a> <a href="/tags/git/" style="font-size: 10px;">git</a> <a href="/tags/git-扩展工具/" style="font-size: 10px;">git 扩展工具</a> <a href="/tags/github-page/" style="font-size: 10px;">github page</a> <a href="/tags/git命令/" style="font-size: 10px;">git命令</a> <a href="/tags/golang/" style="font-size: 15px;">golang</a> <a href="/tags/hello-world/" style="font-size: 10px;">hello world</a> <a href="/tags/hexo/" style="font-size: 12.5px;">hexo</a> <a href="/tags/js/" style="font-size: 12.5px;">js</a> <a href="/tags/lua/" style="font-size: 12.5px;">lua</a> <a href="/tags/nodejs/" style="font-size: 10px;">nodejs</a> <a href="/tags/optionParser/" style="font-size: 10px;">optionParser</a> <a href="/tags/protobuf/" style="font-size: 10px;">protobuf</a> <a href="/tags/python/" style="font-size: 17.5px;">python</a> <a href="/tags/scons/" style="font-size: 12.5px;">scons</a> <a href="/tags/spine/" style="font-size: 10px;">spine</a> <a href="/tags/sublime插件/" style="font-size: 10px;">sublime插件</a> <a href="/tags/websocket/" style="font-size: 10px;">websocket</a> <a href="/tags/xmake/" style="font-size: 12.5px;">xmake</a> <a href="/tags/优化/" style="font-size: 12.5px;">优化</a> <a href="/tags/前端/" style="font-size: 15px;">前端</a> <a href="/tags/博客/" style="font-size: 10px;">博客</a> <a href="/tags/原型链/" style="font-size: 10px;">原型链</a> <a href="/tags/后端/" style="font-size: 10px;">后端</a> <a href="/tags/广告/" style="font-size: 10px;">广告</a> <a href="/tags/微信小游戏/" style="font-size: 20px;">微信小游戏</a> <a href="/tags/缺少dll/" style="font-size: 10px;">缺少dll</a> <a href="/tags/闭包/" style="font-size: 10px;">闭包</a>
        </div>
    </div>
</div>
<div class="search-wrap">
    <span class="search-close">&times;</span>
        <a href="javascript:;" class="header-icon waves-effect waves-circle waves-light" id="back">
            <i class="icon icon-lg icon-chevron-left"></i>
        </a>
        <input class="search-field" placeholder="Search..." id="keywords">
        <a id="search-submit" href="javascript:;">
            <i class="fa fa-search"></i>
        </a>
    <div class="search-container" id="search-container">
        <ul class="search-result" id="search-result">
        </ul>
    </div>
</div>

<div id="search-tpl">
    <li class="search-result-item">
        <a href="{url}" class="search-item-li">
            <span class="search-item-li-title" title="{title}">{title}</span>
        </a>
    </li>
</div>
<script src="/js/search.js"></script>
<script src="/js/main.js"></script>


  <script src="//cdn.bootcss.com/particles.js/2.0.0/particles.min.js"></script>
  <div id="particles"></div>
  <script src="/js/particles.js"></script>







  <link rel="stylesheet" href="//cdn.bootcss.com/animate.css/3.5.0/animate.min.css">
  <script src="//cdn.bootcss.com/scrollReveal.js/3.0.5/scrollreveal.js"></script>
  <script src="/js/animate.js"></script>


  <script src="/js/pop-img.js"></script>
  <script>
     $(".article-entry p img").popImg();
  </script>

  </div>
</body>
</html>